<template>
	<view>
		<view class="box1" v-if="flag1"></view>
		<view class="box2" v-if="flag2"></view>

		<file-upload-app ref="fileUpload" @imageUrl="imageUrl"></file-upload-app>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref,
		onMounted,
		nextTick
	} from 'vue'

	let flag1 = ref(false)
	let flag2 = ref(false)

	// 
	const fileUpload = ref()
	onMounted(() => {
		console.log('fileVm', fileUpload.value.$son);
		// console.log('$nextTick', fileUpload.value.$son.$nextTick);
	})

	let imageArr = ref([])
	const imageUrl = (data) => {
		if (data.length > 0) flag1.value = true
		else if (data.length > 1) flag2.value = true
		else {
			flag1.value = false
			flag2.value = false
		}
		// 重新计算位置
		nextTick(() => fileUpload.value.$son.show())


		console.log('imageUrl', data);
	}
</script>

<style lang="scss" scoped>
	.box1 {
		height: 80rpx;
		width: 90vw;
		margin: 0 auto;
		background-color: pink;
	}

	.box2 {
		height: 80rpx;
		width: 90vw;
		margin: 0 auto;
		background-color: seagreen;
	}
</style>